<template>
<div class="data-handle">
    <title-bar title="表结构">
        <el-radio-group slot="item" v-model="editType" @change="changeEditType">
            <el-radio-button :label="0">列表</el-radio-button>
            <el-radio-button :label="1">编辑</el-radio-button>
        </el-radio-group>
    </title-bar>
    <div v-if="editType === 1" class="textarea-input">
        <el-input @blur="getEditData" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" :rows="6" v-model="fileds" placeholder="按字段顺序填写每个字段的名称和数据类型，不同字段的描述信息按行分隔，字段内的描述信息按逗号分隔 如name,String" type="textarea"></el-input>
    </div>
    <el-table v-if="editType === 0" class="scroll-bar" :data="previewData.schema" max-height="300px">
        <el-table-column prop="name" label="列名" align="center">
            <template slot-scope="scope">
                <el-input onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" clearable placeholder="请输入列名" v-model="scope.row.name"></el-input>
            </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" align="center">
            <template slot-scope="scope">
                <el-select v-model="scope.row.type" placeholder="请选择类型">
                    <el-option v-for="(item, i) in typeList" :key="i" :label="item" :value="item"></el-option>
                </el-select>
            </template>
        </el-table-column>
    </el-table>
    <!-- <template v-if="[0,1,2].includes(form.dataType)"> -->
    <title-bar title="异常处理"></title-bar>
        <!-- <div class="tips-box">
            <i class="el-icon-warning"></i>
            <span>数据的实际类型与设置的相应字段类型不符</span>
        </div> -->
        <!-- prop="typeException" -->
    <el-form-item label="类型不一致">
        <template slot="label">
            <span>类型不一致</span>
            <el-tooltip class="item" effect="dark" content="数据的实际类型与设置的相应字段类型不符" placement="top">
                <span class="tips-box1"><i class="el-icon-warning"></i></span>
            </el-tooltip>
        </template>
        <el-select v-model="form.typeException" placeholder="请选择类型">
            <el-option value="Missing Value" label="值设置为null"></el-option>
            <el-option value="Discard Row" label="丢弃异常行"></el-option>
            <el-option value="Return Failed" label="返回失败"></el-option>
        </el-select>
    </el-form-item>
    <!-- prop="columnsException" -->
    <el-form-item label="列数不一致">
        <template slot="label">
            <span>列数不一致</span>
            <el-tooltip class="item" effect="dark" content="数据的实际列数与设定的相应列数不符" placement="top">
                <span class="tips-box1"><i class="el-icon-warning"></i></span>
            </el-tooltip>
        </template>
        <el-select v-model="form.columnsException" placeholder="请选择列">
            <el-option value="Discard Row" label="丢弃异常行"></el-option>
            <el-option value="Return Failed" label="返回失败"></el-option>
        </el-select>
    </el-form-item>
    <!-- </template> -->
    <title-bar title="平台存储"></title-bar>
    <el-form-item label="表名" prop="tableName">
        <el-input :maxlength="64" placeholder="请输入数据表名" clearable v-model="form.tableName"></el-input>
    </el-form-item>
    <el-form-item label="描述">
        <el-input :rows="4" clearable v-model="form.description" type="textarea" placeholder="数据表的说明，50个字符以内" :maxlength="50"></el-input>
    </el-form-item>
    <title-bar title="调优参数"></title-bar>
    <el-form-item label-width="180px" label="执行节点数量" prop="sparkExecutionNumber">
        <el-input :maxlength="64" placeholder="请输入执行节点数量" clearable v-model="form.sparkExecutionNumber"></el-input>
    </el-form-item>
    <el-form-item label-width="180px" label="每个执行节点线程数" prop="sparkExecutionCores">
        <el-input :maxlength="64" placeholder="请输入每个执行节点线程数" clearable v-model="form.sparkExecutionCores"></el-input>
    </el-form-item>
    <el-form-item label-width="180px" label="内存单位MB" prop="sparkExecutionMemory">
        <el-input :maxlength="64" placeholder="请输入内存单位MB" clearable v-model="form.sparkExecutionMemory"></el-input>
    </el-form-item>
    <el-form-item label-width="180px" label="Driver节点线程数" prop="sparkDriverCores">
        <el-input :maxlength="64" placeholder="请输入Driver节点线程数" clearable v-model="form.sparkDriverCores"></el-input>
    </el-form-item>
    <el-form-item label-width="180px" label="内存单位MB" prop="sparkDriverMemory">
        <el-input :maxlength="64" placeholder="请输入内存单位MB" clearable v-model="form.sparkDriverMemory"></el-input>
    </el-form-item>
</div>
</template>
<script>
import TitleBar from '@/components/TitleBar'
import {
    mapGetters,
    mapMutations
} from 'vuex'
export default {
    name: 'DataHandle',
    props: {
        form: {
            type: Object
        }
    },
    components: { TitleBar },
    computed: {
        ...mapGetters({
            projectId: 'common/getProjectId',
            previewData: 'common/getPreviewData'
        })
    },
    data () {
        return {
            fileds: '',
            typeList: [
                'Boolean',
                'Integer',
                'Long',
                'Float',
                'Double',
                'String',
                'Date',
                'Timestamp'
            ],
            editType: 0
        }
    },
    methods: {
        ...mapMutations({
            setPreviewData: 'common/setPreviewData'
        }),
        getEditData () {
            if (this.fileds) {
                let arr = this.fileds.split(/[\n]/g).filter(v => v)
                let schema = arr.map(item => {
                    let [name, type] = item.split(',')
                    if (!this.typeList.includes(type)) {
                        type = null
                    }
                    return { name, type: type }
                })
                if (schema.length === this.previewData.schema.length) {
                    const { fileSize, records } = this.previewData
                    this.setPreviewData({
                        cols: schema.length || 0,
                        fileSize,
                        records,
                        schema
                    })
                } else {
                    this.$message.error('错误操作，只能对原有列名或类型进行修改，请勿删除或新增列名！')
                }
            }
        },
        changeEditType (val) {
            if (val === 1) {
                let arr = this.previewData.schema
                if (arr.length) {
                    this.fileds = ''
                    arr.forEach(item => {
                        this.fileds +=
`${item.name},${item.type}
`
                    })
                }
            } else {
                this.getEditData()
            }
        }
    }
}
</script>
<style lang="less">
.data-handle {
    .textarea-input {
        .el-textarea__inner {
            width: 100% !important;
        }
    }
    .el-table {
        table {
            width: 100% !important;
        }

        .el-table__empty-block {
            width: 100% !important;
        }
    }
}
</style>
